@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

/**
 * @description: 开启flex定位 默认水平垂直居中
 * @param {*} $jc justify-content 主轴排列方式
 * @param {*} $ai align-items 副轴排列方式
 * @param {*} $ff flex-flow 主轴方向
 */
@mixin flexBox($jc:center, $ai:center, $ff:row, $fw:wrap) {
  display: flex;
  justify-content: $jc;
  align-items: $ai;
  flex-flow: $ff;
  flex-wrap: wrap;
}

/**
 * @description: 文本超出 显示省略号 
 * @param {*} $line 控制溢出的行数
 *在flex作用于下 会失效 所以使用时 请确保不被flex布局影响 或者 在元素外套一层dom结构
 */

@mixin ellipsis($line:null) {
  @if ($line) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
  }

  @else {
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  overflow: hidden;
}
